<template>
  <div id="building">
    <div class="box" style="text-align: center">
      <div>
        <div style="margin-top: 20px;font-size: 24px">注册</div>
      </div>
      <el-divider></el-divider>
      <div style="margin: 30px 50px">
        <el-form :label-position="'top'" :model="ruleForm" :rules="rules" @validate="onValid">
          <el-form-item label="账号" prop="account">
            <el-alert
                title="提示"
                type="warning"
                description="账号名不可更改,请谨慎哦"
                show-icon
            />
            <el-input type="text" v-model="ruleForm.account" clearable>
              <template #prefix>
                <el-icon>
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" show-password>
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="重复密码" prop="rePassword">
            <el-input type="password" v-model="ruleForm.rePassword" show-password>
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="ruleForm.phone" clearable>
              <template #prefix>
                <el-icon>
                  <Cellphone/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <div>
              <el-row>
                <el-col :span="16">
                  <el-input type="text" v-model="ruleForm.code" style="width: 200px">
                    <template #prefix>
                      <el-icon>
                        <Message/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-button style="width: 100px;" :disabled="!isValidPhone||ruleForm.timeout" @click="getCode">{{ ruleForm.buttonText }}</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-form>


      </div>
      <div style="margin-bottom: 20px">
        <el-button type="warning" style="margin-left: 10px" @click="register">注册</el-button>
      </div>
      <div style="margin-bottom: 20px">
        <span>已有账号?</span>
        <el-link type="success" style="position: relative;top: -1px;font-size: 15px" @click="router.push('/login')">
          去登陆
        </el-link>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

import {Cellphone, Lock, Message, User} from "@element-plus/icons-vue";
import router from "@/router";
import {reactive, ref} from "vue";
import type {FormRules, FormItemProp} from "element-plus";
import {post_json,get} from "@/assets/ts/ruquestMethod";
import {ElMessage} from "element-plus";

const validAccount = (rule: any, value: any, callback: any) => {
  if (value === '')
    callback(new Error('请输入账号'))
  else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value))
    callback(new Error('账号名只能由中文、英文、数字以及下划线组成'))
  else
    get(`/accounts/isExit?username=${value}`,(res:any)=>{
      if(res.status == 1){
        callback(new Error('账号已存在'))
      }else{
        callback()
      }
    })

}
const validPassword = (rule: any, value: any, callback: any) => {
  if (value === '')
    callback(new Error('请输入密码'))
  else if (value.length < 6 || value.length > 16)
    callback(new Error('密码应在6到16字符之间'))
  else
    callback()
}
const validRePassword = (rule: any, value: any, callback: any) => {
  if (value === '')
    callback(new Error('请输入密码'))
  else if (value !== ruleForm.password)
    callback(new Error('与密码不一致！'))
  else
    callback()
}
const validPhone = (rule: any, value: any, callback: any) => {
  if (value == '')
    callback(new Error('请输入手机号'))
  else if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value))
    callback(new Error('请输入格式正确的手机号'))
  else {
    callback()
  }
}
const onValid = (prop: FormItemProp, isValid: boolean) => {
  if (prop === 'phone') {
    isValidPhone.value = isValid
  }
}
let time = 0, timer: number | undefined
function timer1(){
  if(time > 0){
    time--
    ruleForm.buttonText = time +'s后重新获取'
    timer = setTimeout(timer1,1000)
  }else {
    time = 0
    ruleForm.buttonText = '获取验证码'
    ruleForm.timeout = false
    clearTimeout(timer)
  }
}
const getCode = () => {
  get('/accounts/code?phone='+ruleForm.phone,
      (data:any) => {
        if(data.status === 1){
          ElMessage.success(data.message)
          ruleForm.timeout = true
          time = 60
          timer1()
        }
        if(data.status === 0){
          ElMessage.warning(data.message)
        }
      }
  )
}
const register= ()=>{
  post_json(`/accounts?code=${ruleForm.code}`,
      {
        userid: ruleForm.account,
        phone : ruleForm.phone,
        password:ruleForm.password
      },
      (res:any)=>{
        if(res.status ==1){
          ElMessage.success('注册成功')
          router.push('/login')
        }
  })
}
const ruleForm = reactive({
  account: '',
  password: '',
  rePassword: '',
  phone: '',
  code: '',
  buttonText:'获取验证码',
  timeout: false
})
const rules = reactive<FormRules>({
  account: [{validator: validAccount, trigger: 'blur'}],
  password: [{validator: validPassword, trigger: ['blur', 'change']}],
  rePassword: [{validator: validRePassword, trigger: ['blur', 'change']}],
  phone: [{validator: validPhone, trigger: ['blur', 'change']}]
})

let isValidPhone = ref(false)

</script>

<style scoped>
#building {
  background: url("../../assets/image/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.box {
  /*backdrop-filter: blur(5px);*/
  background-color: rgba(255, 255, 255, 0.5);
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px gray;
  border-radius: 10px;
  box-shadow: var(--el-box-shadow);
}

</style>